<template>
	<view class="dormitorys_box">
		<Tips/>
		<scroll-view 
			scroll-y="true" 
			class="scroll-Y" 
			:refresher-background="primary_light_color"
			refresher-default-style="white"
			:refresher-enabled="true"
			:refresher-triggered="loading"
			@refresherrefresh="startPullDownFun"
			@scrolltolower="scrollToLowerFun">
		<view class="dormitorys_header">
			<view class="create_dormitory">
				<view class="icon" @click="goCreateDormitory">
					<MyIcons size="60rpx" :src="joinSystemPath('dormitory.png')"/>
					创建
				</view>
			</view>
			<view class="hook">
				<MyIcons size="60rpx" :src="joinSystemPath('createDormitoryHeaderHook.png')"/>
			</view>
			<view class="line"></view>
			<view class="dormitorys_illustration">
				<image
					style="width: 288rpx; height: 240rpx;" 
					mode="aspectFit" 
					@load="imgLoad"
					:src="joinSystemPath('dormitorys.png')"/>
			</view>
		</view>
		<view class="choose">
			<uni-segmented-control 
				:current="current" 
				:values="items" 
				style-type="button"
				:active-color="primary_light_color" 
				@clickItem="onChooseFun" />
		</view>
		<view class="dormitory_list">
			<DormitoryCard v-for="item in dormitoryList" :key="item.id" :dormitoryData="item"/>
			<view class="load_box">
				<uni-load-more :content-text="contentText" iconType="circle" :color="primary_hot_color" :status="loadingStatus" />
			</view>
			<view v-if="!dormitoryList.length">
				<MyNull img="nullContent.png" />
			</view>
		</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {onLoad} from '@dcloudio/uni-app'
	import { ref, watch } from "vue"
	
	import MyIcons from '@/components/MyIcons/MyIcons.vue'
	import DormitoryCard from '@/components/DormitoryCard/DormitoryCard.vue'
	import Tips from '@/components/Tips/Tips.vue'
	import MyNull from '@/components/MyNull/MyNull.vue'
	
	import {dynamicStyleStore} from '@/stores/dynamicStyle.js'
	import {userStore} from '@/stores/user'
	import {DormitoryModel} from '@/service/model/dormitory.js'
	
	import {
		joinSystemPath
	} from '@/utils/imgJoinName.js'
	import {
		changeTimeByDuty,
		toTime
	} from '@/utils/changeData.js'
	import {
		verifyIsLogin
	} from '@/hooks/verify.js'
	
	const dynamicStyle_store=dynamicStyleStore()
	const user_store=userStore()
	const dormitoryModel = new DormitoryModel()
	
	const {
		primary_light_color,
		primary_main_bgc,
		primary_modal_bgc,
		primary_hot_color
	} = dynamicStyle_store.globalStyle
	
	const nowDate = ref(new Date())
	const query = ref({
		limit:10,
		page:0,
		orderBy:'createAt.desc',
		isSelfCreate:0,
		week:nowDate.value.getDay(),
		time:changeTimeByDuty((toTime(Date.now())+'').match(/\d{2}:\d{1,2}:\d{1,2}/)+'')
	})
	const isAllowScroll = ref(true)
	const loading=ref(false)
	
	const items = ref(['我加入的','我创建的'])
	const current = ref(0)
	
	const dormitoryList=ref([])
	
	const loadingStatus = ref('more')
	const contentText =ref({
		contentdown: '更多宿舍',
		contentrefresh: '加载宿舍中',
		contentnomore: '没有更多宿舍了'
	})
	
	//选择展示条件
	const onChooseFun=(e)=>{
		verifyIsLogin()
		query.value.isSelfCreate = e.currentIndex
		init()
	}
	
	//获取已加入宿舍列表
	const getJoinedDormitorysFun= async()=>{
		loadingStatus.value = 'loading'
		const {data,success} = await dormitoryModel.getJoinedDormitorys(query.value)
		if(success){
			if(loading.value === true){
				uni.$emit('tips','刷新成功','info')
			}
			loading.value = false
			if(!data.length){
				loadingStatus.value = 'noMore'
				isAllowScroll.value = false
				return
			}
			dormitoryList.value = [...dormitoryList.value,...data]
			if(data.length < query.value.limit){
				loadingStatus.value = 'noMore'
				isAllowScroll.value = false
			}else{
				loadingStatus.value = 'more'
			}
		}else{
			if(loading.value === true){
				uni.$emit('tips','刷新失败','info')
			}
			loading.value = false
		}
		if(uni.getStorageSync('isDeleteDormitory')){
			uni.$emit('tips','宿舍已经被解散或者您不在该宿舍里','error',3000)
			uni.setStorageSync('isDeleteDormitory',false)
		}
	}
	
	//滚到了底部
	const scrollToLowerFun=()=>{
		if(isAllowScroll.value){
			query.value.page++
			getJoinedDormitorysFun()			
		}
	}
	
	const init=()=>{
		query.value.limit = 10,
		query.value.page = 0,
		query.value.orderBy = 'createAt.desc'
		isAllowScroll.value = true
		dormitoryList.value = []
		loadingStatus.value = 'more'
		nowDate.value = new Date()
		
		getJoinedDormitorysFun()
	}
	
	//去往创建宿舍的页面
	const goCreateDormitory=()=>{
		uni.navigateTo({
			url: '/pages/Dormitorys/CreateDormitory/CreateDormitory'
		});
	}
	
	const imgLoadFlag = ref(false)
	//头部插画是否已经加载完成了
	const imgLoad=()=>{
		imgLoadFlag.value = true
	}
	
	watch(()=>user_store.userInfo?.id,()=>{
		init()
	})
	
	onLoad(()=>{
		uni.getStorageSync('token') && init()
	})
	
	const startPullDownFun=()=>{
		loading.value = true
		uni.getStorageSync('token') && init()
	}
</script>

<style lang="less">
	@keyframes create_icon {
		0%{
			background-color: #DC3855;
		}
		50%{
			background-color: #FF4E77;
		}
		100%{
			background-color: #DC3855;
		}
	}
	.scroll-Y {
			height: calc(101vh);
		}
	.dormitorys_box{
		min-height: calc(100vh);
		background-color: v-bind(primary_main_bgc);
	}
	.dormitorys_header{
		background-color: v-bind(primary_light_color);
		display: grid;
		grid-template-columns: 2fr 2fr;
		align-items:center;
		column-gap:20rpx;
		position: fixed;
		width: 100%;
		height: 250rpx;
		margin-top: -1rpx;
		z-index: 3;
		.icon{
			width: 140rpx;
			height: 140rpx;
			border-radius:50%;
			font-size: 25rpx;
			color: #fff;
			flex-shrink:0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin: 0 20rpx;
			animation-name: create_icon;
			animation-duration: 2s;
			animation-iteration-count: infinite;
		}
		.create_dormitory{
			justify-self: end;
		}
		.hook{
			position: absolute;
			left: 3%;
			top:45%;
		}
		.line{
			width: 92%;
			height: 10%;
			position: absolute;
			left: 50%;
			top:50%;
			transform:translate(-50%,-50%);
			top: 77.6%;
			border-bottom:20rpx solid #F3F3F3;
			border-left:20rpx solid #F3F3F3;
			border-bottom-left-radius: 100rpx;
			z-index: 4;
		}
		.dormitorys_illustration{
			justify-self: center;
		}
	}
	.choose{
		width: 94%;
		position: fixed;
		top:50%;
		left:50%;
		transform:translate(-50%,-50%);
		/* #ifdef MP-WEIXIN */
		top:290rpx;
		/* #endif */
		/* #ifdef H5 */
		top:380rpx;
		/* #endif */
		background-color: v-bind(primary_main_bgc);
		z-index: 2;
		padding-top: 40rpx;
	}
	.dormitory_list{
		padding: 0 3%;
		position: absolute;
		top:350rpx;
		width: 94%;
		z-index: 1;
		.load_box{
			margin-bottom: 3%;
		}
	}
</style>
